<template>
  <div style="display: flex">
    <div class="content-area">
      <!--      身份认证-->
      <div style="margin-top: 10px;width: 550px;height: 440px; margin-left: 40px;border: 1px solid #EAEAEA">
        <div class="hiddens">学生</div>
        <hr>
        <div style="display: flex;justify-content: space-between">
          <div class="hiddens">
            <div class="hiddens">学生认证</div>
            <div style="font-size: 12px" class="hiddens">身份证、学生证/身份证，学号/在校证明</div>
          </div>
          <div class="hiddens">
            <el-button v-if="!studert" type="info" style="width: 130px;margin-right: 10px"
                       @click="Authenticat('学生认证')">开始认证
            </el-button>
            <el-button v-else @click="isAuthenticat(0)" type="success" style="width: 130px;margin-right: 10px">认证通过</el-button>
          </div>
        </div>
        <hr>
        <div class="hiddens">教师</div>
        <hr>
        <div style="display: flex;justify-content: space-between">
          <div class="hiddens">
            <div class="hiddens">教师认证</div>
            <div class="hiddens" style="font-size: 12px">教师资格证书/工作证明/身份证、工号</div>
          </div>
          <div class="hiddens">
            <el-button v-if="!teacher" type="info" style="width: 130px;margin-right: 10px"
                       @click="Authenticat('教师认证')">开始认证
            </el-button>
            <el-button v-else @click="isAuthenticat(1)" type="success" style="width: 130px;margin-right: 10px">认证通过</el-button>
          </div>
        </div>
        <hr>
        <div class="hiddens">管理员</div>
        <hr>
        <div style="display: flex;justify-content: space-between">
          <div class="hiddens">
            <div class="hiddens">管理员</div>
            <div class="hiddens" style="font-size: 12px">专业资格证书/推荐信或评价材料</div>
          </div>
          <div class="hiddens">
            <el-button v-if="!experts" type="info" style="width: 130px;margin-right: 10px"
                       @click="Authenticat('管理员')">开始认证
            </el-button>
            <el-button v-else @click="isAuthenticat(2)" type="success" style="width: 130px;margin-right: 10px">认证通过</el-button>
          </div>
        </div>
      </div>
      <!--      身份认证dlog-->
    </div>
    <div>
      <el-dialog
        v-model="authentData"
        :title="hentData.title"
        width="800"
        align-center
      >
        <hr>
        <div style="display: flex">
          <div style="width: 320px;margin-right: 20px">
            <div style="display: flex;margin-top: 20px">
              <div style="margin-left: 30px;margin-top: 5px;margin-right: 10px">姓名</div>
              <el-input v-model="hentData.username" placeholder="请输入姓名" style="width: 220px"/>
            </div>
            <div style="display: flex;margin-top: 20px">
              <div style="margin-left: 30px;margin-top: 5px;margin-right: 10px">{{ hentData.userType === 0 ? "学号" : "工号" }}</div>
              <el-input v-model="hentData.workNumber" placeholder="请输入工号" style="width: 220px"/>
            </div>
            <div style="display: flex;margin-top: 20px">
              <div style="margin-left: 30px;margin-top: 5px;margin-right: 10px">电话</div>
              <el-input v-model="hentData.mobile" placeholder="请输入电话" style="width: 220px"/>
            </div>
            <div style="display: flex;margin-top: 20px">
              <div style="margin-left: 30px;margin-top: 5px;margin-right: 10px">邮箱</div>
              <el-input v-model="hentData.email" placeholder="请输入邮箱" style="width: 220px"/>
            </div>
          </div>
          <div>
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>文件上传</span>
                </div>
              </template>
              <uploadInmage @handleImageSuccess="handleImageSuccess"
                            v-model="hentData.fileList" :show-file-list="true" :is-new-record="true" :limit=4 />
              <span style="color: burlywood;font-size: 13px;margin-top: 10px">{{ hentData.content }}</span>
              <el-dialog v-model="dialogVisible">
                <img w-full :src="hentData.fileList" alt="Preview Image"/>
              </el-dialog>
            </el-card>
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="authentData = false">取消</el-button>
            <el-button type="primary" @click="authentDataSubmit">提交</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import {reactive, ref} from 'vue'
import {ElMessage, ElNotification} from "element-plus";
import uploadInmage from "@/pages/commons/uploadInmae.vue"
import { useRouter } from 'vue-router';
import {useUserStore} from "@/pinia/stores/user";
import {getUserAuthenticationInfo} from "@/pages/userData/userApi.js";
const router = useRouter();
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const fileList = ref([])
const props = defineProps({
  userId: {
    type: Number,
    required: true,
  },
  userType: {
    type: Number,
    required: true,
  },
})
const studert = ref(props.userType === 0 ? true : false)
const authentData = ref(false)
const teacher = ref(props.userType === 1 ? true : false)
const experts = ref(props.userType === 2 ? true : false)
const hentData = reactive({
  userId: props.userId,
  username: '',
  workNumber: '',
  mobile: '',
  email: '',
  userType: '',
  fileList: '',
  title: '管理员',
})
// 上传图片的方法
const handleImageSuccess = (data) => {
  hentData.fileList += data + ','
}
const authentDataSubmit = async () => {
    // 检查姓名
    if (hentData.username.trim() === '') {
        ElMessage.error('请填写姓名');
        return;
    }
    // 检查电话
    if (hentData.mobile.trim() === '') {
        ElMessage.error('请填写电话');
        return;
    }
    // 正则表达式验证电话格式
    const phonePattern = /^[0-9]{11}$/; // 假设有效电话长度为11位数字
    if (!phonePattern.test(hentData.mobile)) {
        ElMessage.error('请输入有效的电话');
        return;
    }

    // 检查邮箱
    if (hentData.email.trim() === '') {
        ElMessage.error('请填写邮箱');
        return;
    }
    // 正则表达式验证邮箱格式
    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!emailPattern.test(hentData.email)) {
        ElMessage.error('请输入有效的邮箱');
        return;
    }
    delete hentData.title
    ws.value.send(JSON.stringify(hentData)); // 发送消息
    authentData.value = false
    ElMessage.success('认证提交成功,请等待管理员审核')
  setTimeout(async () => {
    // 查询用户认证是否通过
    await getUserAuthenticationInfo(props.userId).then(res => {
      if (res.code===0){
        if (res.data.status === 1 || res.data.status === 3){
          useUserStore().logout();
          router.push({path: '/login'});
        }
      }
    })
  },1000)
}

const Authenticat = (data) => {
    ElMessageBox.confirm('确定要'+data+'吗？',
        '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 重置 hentData 的值
        hentData.username = '';
        hentData.workNumber = '';
        hentData.mobile = '';
        hentData.email = '';
        hentData.userType = '';
        hentData.content = '';
        hentData.fileList = ''
        hentData.title = data
        if (data === "管理员") {
            hentData.userType = 2
            hentData.content = "专业资格证书/推荐信或评价材料"
        } else if (data === "教师认证") {
            hentData.userType = 1
            hentData.content = "教师资格证书/工作证明/身份证、工号"
        } else {
            hentData.userType = 0
            hentData.content = "身份证、学生证/身份证，学号/在校证明"
        }
        authentData.value = true
    }).catch(() => {
        ElMessage.info('已取消')
    })

}

const isAuthenticat = (data) => {
  ElMessage.success('您的'+(data===0 ? "学生" : data===1 ? "教师" : "管理员")+'身份认证通过')
}

//建立websocket连接
const ws = ref(null);
const ljie = () => {
    if (ws.value && ws.value.readyState === WebSocket.OPEN) {
        return;
    }
    ws.value = new WebSocket(`ws://localhost:8082/accountAuthentication/${props.userId}`);
    ws.value.onopen = (event) => {

    };
    ws.value.onerror = (error) => {

    };
    ws.value.onclose = (event) => {

    };
    ws.value.onmessage = (event) => {
        try {
            const message = JSON.parse(event.data);
            openAudit(message);
        } catch (error) {
            console.error("消息解析失败:", error);
        }
    };
}
ljie();
const openAudit = (data) => {
    ElNotification({
        title: data.title,
        dangerouslyUseHTMLString: true,
        message: data.description+' 点击前往查看',
        type: 'success',
        duration: 2000,
        onClick: () => {
            router.push({path: '/index/authentication'})
        }
    })
}

</script>
<style scoped>
.avatar-uploader img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.titles {
  text-align: right;
  width: 100px;
  height: 600px;
  margin-left: 20px;
  background: whitesmoke;
}

.hiddens {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.updater {
  width: 500px;
  height: 300px;
  border: 1px solid mintcream;
  box-shadow: 0.5px 0.5px 0.5px 1px #888888;
  border-radius: 4px;
}

.content-area {
  width: 800px;
  height: 600px;

}

.upload-demo {
  width: 300px;
  padding: 10px;
}

.el-icon--upload {
  width: 40px;
  height: 40px;
}

.el-upload__text {
  font-size: 15px;
  margin-bottom: 10px;
  margin-top: -10px;
}

.avatar-box-border {
  border: 1px dashed #409eff !important;
}

.avatar-box {
  border-radius: 50%;
  margin-left: 20px;
  cursor: pointer;
  position: relative;
  border: 2px solid #eee;
  overflow: hidden;

  &:hover::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .03);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .avatar-marker {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #409eff;

    i.iconfont {
      font-size: 24px;
    }
  }
}
</style>
<script setup>
</script>
